'use client';

import { adminUserSearchSchema } from '@/service/query/schema/user';
import type { listUsersByPage } from '@/service/query/user';
import type { User } from '@/service/type/user';
import type { ColumnDef, Table } from '@tanstack/react-table';
import dayjs from 'dayjs';
import { Suspense } from 'react';
import DateRangePicker from '../common/date-range-picker';
import MultiSelector from '../common/multi-selector';
import SearchFilter from '../common/search-filter';
import TableLoading from '../common/table-loading';
import UserStatusBadge from '../common/user-status-badge';
import { Button } from '../ui/button';
import DataTable from '../ui/data-table';
import UserBanUnban from './user-ban-unban';
import UserDetail from './user-detail';

const shopColumns: ColumnDef<User>[] = [
  {
    accessorKey: 'id',
    header: '用户ID',
    cell: ({ row }) => {
      const { id } = row.original;
      return (
        <div className="truncate break-all max-w-16 hover:overflow-visible hover:text-wrap">
          {id}
        </div>
      );
    },
  },
  {
    accessorKey: 'username',
    header: '用户名',
  },
  {
    accessorKey: 'name',
    header: '用户昵称',
  },
  {
    accessorKey: 'email',
    header: '邮箱',
  },
  {
    accessorKey: 'role',
    header: '角色',
    cell: ({ row }) => {
      const { role } = row.original;
      return (
        <div className="text-nowrap">
          {role === 'admin' ? '管理员' : role === 'shop' ? '商铺' : '普通用户'}
        </div>
      );
    },
  },
  {
    accessorKey: 'createdAt',
    header: '注册时间',
    cell: ({ row }) => {
      const { createdAt } = row.original;
      return (
        <div className="text-nowrap">
          {dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss')}
        </div>
      );
    },
  },
  {
    accessorKey: 'banned',
    header: '状态',
    cell: ({ row }) => {
      const { banned } = row.original;
      return <UserStatusBadge status={banned ? 'banned' : 'normal'} />;
    },
  },
  {
    id: 'action',
    header: '操作',
    cell: ({ row }) => {
      return (
        <div className="py-1 flex items-center gap-1 text-lg">
          <UserBanUnban
            button={
              <Button variant="ghost">
                {row.original.banned ? '解封' : '封禁'}
              </Button>
            }
            userId={row.original.id}
            banned={!!row.original.banned}
          />
          <UserDetail
            button={<Button variant="ghost">详情</Button>}
            user={row.original}
          />
        </div>
      );
    },
  },
];

export default function UserTable({
  pageData,
}: {
  pageData: ReturnType<typeof listUsersByPage>;
}) {
  return (
    <div className="space-y-5">
      <SearchFilter
        formSchema={adminUserSearchSchema}
        defaultValues={{
          id: '',
          name: '',
          email: '',
          role: [],
          status: [],
          dateRange: undefined,
        }}
        formItems={[
          { name: 'id', label: '用户ID' },
          { name: 'name', label: '用户名' },
          { name: 'email', label: '邮箱' },
          {
            name: 'role',
            label: '角色',
            inputComp: MultiSelector,
            options: {
              items: [
                {
                  label: '管理员',
                  value: 'admin',
                },
                {
                  label: '商铺',
                  value: 'shop',
                },
                {
                  label: '普通用户',
                  value: 'user',
                },
              ],
            },
          },
          {
            name: 'status',
            label: '状态',
            inputComp: MultiSelector,
            options: {
              items: [
                {
                  label: '正常',
                  value: 'normal',
                },
                {
                  label: '封禁',
                  value: 'banned',
                },
              ],
            },
          },
          { name: 'dateRange', label: '注册时间', inputComp: DateRangePicker },
        ]}
      />
      <Suspense fallback={<TableLoading />}>
        <DataTable<User> pageData={pageData} columns={shopColumns} />
      </Suspense>
    </div>
  );
}
